<template>
  <nav class="category mc">
    <Router-link class="category-item" to="/materials/choose-group">
      <i-ep-circle-check />
      <div>选择</div>
    </Router-link>

    <Router-link class="category-item" to="/materials/text-input-group">
      <i-ep-edit-pen />
      <div>文本输入</div>
    </Router-link>

    <Router-link class="category-item" to="/materials/advanced-group">
      <i-ep-files />
      <div>高级题型</div>
    </Router-link>

    <Router-link class="category-item" to="/materials/remark-group">
      <i-ep-chat-line-square />
      <div>备注说明</div>
    </Router-link>

    <Router-link class="category-item" to="/materials/personal-info-group">
      <i-ep-user />
      <div>个人信息</div>
    </Router-link>

    <Router-link class="category-item" to="/materials/contact-way-group">
      <i-ep-message />
      <div>联系方式</div>
    </Router-link>
  </nav>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.category {
  width: 70px;
  height: 100%;
  > .category-item {
    width: 70px;
    height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    text-align: center;
    text-decoration: none;
    font-size: var(--x-font-size-base);
    color: var(--x-white);
    border-top-left-radius: var(--x-border-radius-lg);
    border-bottom-left-radius: var(--x-border-radius-lg);
  }
  @for $i from 1 through 4 {
    .category-item:nth-child(4n + #{$i}) {
      @if $i == 1 {
        background-color: var(--x-primary-color);
      } @else if $i == 2 {
        background-color: var(--x-success-color);
      } @else if $i == 3 {
        background-color: var(--x-warning-color);
      } @else if $i == 4 {
        background-color: var(--x-error-color);
      }
    }
  }
}
</style>
